import React, { useCallback } from 'react';
import { useHistory,
    Switch,
    Route } from 'react-router-dom';
import List from './List';
import { ContentStyle } from './styledList.js';
import Detail from '../Detail';
const Content = (props) => {
    const history = useHistory();
    const clickHandler = useCallback((params) => {
        return () => {
            console.log(history);
            history.push('/my/monitoring/detail/' + params)
        }
    }, [history])
    return (
        <ContentStyle>
            <Switch>
                <Route path='/my/monitoring/detail/:type'  >
                    <Detail></Detail>
                </Route>
                
            </Switch>
            {
                props.data.map((value, index) => {
                    return (
                        <List {...value} click={clickHandler(value.type)} key={index}></List>

                    )
                })
            }
        </ContentStyle>
    );
}

export default Content;
